<template>
  <div class="carDetail">
    <div class="carDetail__left">
      <div class="carDetail__left__head">
        <div class="carDetail__left__head__title">
          <img
            src="@/assets/img/byd.png"
            class="carDetail__left__head__title__img"
          /><span class="carDetail__left__head__title__text">比亚迪 汉EV</span>
        </div>
        <div class="carDetail__left__head__four">
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;车型年款</span
            ><span class="carDetail__left__head__four__item__text"
              >:{{ modelConfig.yearCode }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;上市时间</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.announcedDate }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;指导价区间</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.guidePrice }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;车型级别</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.carLevel }}</span
            ></span
          >
        </div>
        <div class="carDetail__left__head__four">
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;车身结构</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.bodyStructure }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;能源类型</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.energyType }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;快充时间</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.quickChargeTime }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;公用/家用慢充时间</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.normalChargeTime }}</span
            ></span
          >
        </div>
        <div class="carDetail__left__head__two">
          <span class="iconfont carDetail__left__head__two__item"
            ><span class="iconfont carDetail__left__head__two__item__title"
              >&#xe6f4;驱动方式</span
            ><span class="carDetail__left__head__two__item__text"
              >: {{ modelConfig.driverType }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__two__item"
            ><span class="iconfont carDetail__left__head__two__item__title"
              >&#xe6f4;长/宽/高/轴距（mm）</span
            ><span class="carDetail__left__head__two__item__text"
              >: {{ modelConfig.bodySize + "/" + modelConfig.wheelBase }}</span
            ></span
          >
        </div>
        <div class="carDetail__left__head__four">
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;车机系统</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.huSystem }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;系统平台</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.systemPlat }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;网络类型</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ modelConfig.netType }}</span
            ></span
          >
          <span class="iconfont carDetail__left__head__four__item"
            ><span class="iconfont carDetail__left__head__four__item__title"
              >&#xe6f4;最近一次OTA时间</span
            ><span class="carDetail__left__head__four__item__text"
              >: {{ carDetail.updateTime }}</span
            ></span
          >
        </div>
      </div>
      <div class="carDetail__left__up">
        <div class="carDetail__left__up__title">车主用户画像</div>
        <p class="carDetail__left__up__text">
          {{ carDetail.ownerFeature }}
        </p>
      </div>
      <div class="carDetail__left__thought">
        <div class="carDetail__left__thought__title">智能网联系统设计理念</div>
        <p class="carDetail__left__thought__text">
          {{ carDetail.sysDesignIdea }}
        </p>
      </div>
      <div class="carDetail__left__ad">
        <div class="carDetail__left__ad__title">智能网联系统主要优势</div>
        <ul class="carDetail__left__ad__text">
          <li
            class="carDetail__left__ad__text__item"
            v-for="(item, index) in carDetail.sysAdvantage"
            :key="index"
          >
            <span class="iconfont">&#xe621;</span>{{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="carDetail__right">
      <ul class="carDetail__right__pages">
        <li
          class="carDetail__right__pages__page"
          v-for="(item, index) in carDetail.imageList"
          :key="index"
        >
          <img
            :src="'http://10.15.59.210:8003/' + item.imgUrl"
            alt=""
            class="carDetail__right__pages__page__img"
          />
          <p class="carDetail__right__pages__page__text">全屏大图</p>
        </li>
      </ul>
      <p class="carDetail__right__more">查看更多></p>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { get } from "@/utils/request";
import { reactive, toRefs } from "vue";
// 数据请求
const useContentEffect = () => {
  const data = reactive({
    carDetail: {},
    modelConfig: {},
  });
  const router = useRouter();
  const getContent = async () => {
    const result = await get(
      "/icvdb/content/getVehInfo",
      {
        model: router.currentRoute.value.query.model,
      },
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.carDetail = result.data;
    data.modelConfig = result.data.modelConfig;
    data.carDetail.updateTime = data.carDetail.updateTime.substring(0, 10);
    data.carDetail.sysAdvantage = result.data.sysAdvantage.split("\n");
    console.log(result.data);
  };
  const { carDetail, modelConfig } = toRefs(data);
  return { carDetail, getContent, modelConfig };
};
export default {
  setup() {
    const { carDetail, getContent, modelConfig } = useContentEffect();
    getContent();
    return { carDetail, modelConfig };
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.carDetail {
  flex: 1;
  display: flex;
  &__left {
    width: 122rem;
    display: flex;
    flex-direction: column;
    &__head {
      height: 24.8rem;
      background-color: $lighter-blue;
      &__title {
        height: 5.1rem;
        border-bottom: 0.1rem solid $border-gray;
        font-weight: bold;
        font-size: 2.2rem;
        padding-left: 2.2rem;
        &__img {
          width: 6rem;
          height: 5.1rem;
          float: left;
        }
        &__text {
          line-height: 5.1rem;
          display: inline-block;
          margin-left: 0.7rem;
        }
      }
      &__two {
        height: 4.52rem;
        padding-left: 0;
        & span:first-child {
          width: 22%;
        }
        &__item {
          line-height: 4.52rem;
          height: 4.52rem;
          display: inline-block;
          padding-left: 2.2rem;
          &__title {
            font-size: 1.4rem;
            font-weight: bold;
          }
          &__text {
            font-size: 1.4rem;
          }
        }
      }
      &__four {
        height: 4.52rem;
        padding-left: 0;
        & > span:nth-of-type(1) {
          width: 22%;
        }
        & > span:nth-of-type(2) {
          width: 22%;
        }
        & > span:nth-of-type(3) {
          width: 22%;
        }
        &__item {
          line-height: 4.52rem;
          height: 4.52rem;
          display: inline-block;
          padding-left: 1.8rem;
          &:first-child {
            padding-left: 2.2rem;
            margin-left: 0rem;
          }

          &__title {
            font-size: 1.4rem;
            font-weight: bold;
          }
          &__text {
            font-size: 1.4rem;
          }
        }
      }
    }
    &__up {
      &__title {
        height: 3.6rem;
        text-indent: 2.2rem;
        line-height: 3.6rem;
        background-color: $light-gray;
        font-size: 1.6rem;
        font-weight: bolder;
      }
      &__text {
        height: 13.3rem;
        font-size: 1.4rem;
        line-height: 2.1rem;
        padding: 1.1rem 2.4rem 0 2.4rem;
        overflow-y: scroll;
      }
      &__text::-webkit-scrollbar {
        width: 0.8rem;
      }
      &__text::-webkit-scrollbar-button {
        display: none;
      }
      &__text::-webkit-scrollbar-thumb {
        background-color: $scroll-gray;
        border-radius: 10px;
      }
      &__text::-webkit-scrollbar-thumb:hover {
        background-color: $scroll-deep-gray;
      }
    }
    &__thought {
      flex: 1;
      margin-top: 0.9rem;
      &__title {
        height: 3.6rem;
        text-indent: 2.2rem;
        line-height: 3.6rem;
        background-color: $light-gray;
        font-size: 1.6rem;
        font-weight: bolder;
      }
      &__text {
        height: 15rem;
        font-size: 1.4rem;
        line-height: 2.1rem;
        padding: 1.1rem 2.4rem 0 2.4rem;
        overflow-y: scroll;
      }
      &__text::-webkit-scrollbar {
        width: 0.8rem;
      }
      &__text::-webkit-scrollbar-button {
        display: none;
      }
      &__text::-webkit-scrollbar-thumb {
        background-color: $scroll-gray;
        border-radius: 10px;
      }
      &__text::-webkit-scrollbar-thumb:hover {
        background-color: $scroll-deep-gray;
      }
    }
    &__ad {
      margin-top: 0.9rem;
      display: flex;
      flex-direction: column;
      padding-bottom: 1rem;
      &__title {
        height: 3.6rem;
        text-indent: 2.2rem;
        line-height: 3.6rem;
        background-color: $light-gray;
        font-size: 1.6rem;
        font-weight: bolder;
      }
      &__text {
        font-size: 1.4rem;
        line-height: 2.5rem;
        padding: 1.1rem 2.4rem 0 2.4rem;
        height: 15rem;
        overflow-y: scroll;
        .iconfont {
          font-size: 1.4rem;
          margin-right: 0.6rem;
          font-weight: lighter;
          color: gray;
        }
      }
      &__text::-webkit-scrollbar {
        width: 0.8rem;
      }
      &__text::-webkit-scrollbar-button {
        display: none;
      }
      &__text::-webkit-scrollbar-thumb {
        background-color: $scroll-gray;
        border-radius: 10px;
      }
      &__text::-webkit-scrollbar-thumb:hover {
        background-color: $scroll-deep-gray;
      }
    }
  }
  &__right {
    flex: 1;
    position: relative;
    &__pages {
      height: 95%;
      position: absolute;
      overflow-y: scroll;
      left: 50%;
      transform: translateX(-50%);
      padding-right: 1rem;
      &__page {
        position: relative;
        &__img {
          width: 40.3rem;
        }
        &__text {
          position: absolute;
          right: 0.5rem;
          top: 0.3rem;
          background-color: rgba($color: #000000, $alpha: 0.4);
          width: 7.4rem;
          height: 2.4rem;
          color: $lignt-yellow;
          line-height: 2.4rem;
          padding: 0 0.4rem;
          font-size: 1.4rem;
          cursor: pointer;
          transition: 0.3s ease;
        }
        &__text:hover {
          color: $deep-yellow;
        }
      }
      &::-webkit-scrollbar {
        width: 1rem;
      }
      &::-webkit-scrollbar-button {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background-color: $scroll-gray;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: $scroll-deep-gray;
      }
    }
    &__more {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      color: $blue;
      cursor: pointer;
      transition: 0.3s ease;
    }
    &__more:hover {
      color: $deep-blue;
    }
  }
}
</style>